<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/base.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/index.js"></script>
    <title>教育网移动端s</title>
    <style>
    .shop-details .header{
        position:relative;
        width:100%;
        height:.5rem;
        background:#11e1ee;
    }
    .shop-details .header a{
        position: absolute;
        top:0;
        left:0.2rem;
        line-height:.5rem;
    }
    .shop-details .header p{
        color:#fff;
        text-align:center;
        font-weight:bold;
        line-height:.5rem;
    }
    /* 商品详情 */
    .shop-details .goods-details{
        width:100%;
        height:2.7rem;
        border-bottom:1px solid #ccc;
    }
    .shop-details .goods-details .class-details{
        width:100%;
        height:1.2rem;
        border-bottom:1px solid #ccc;
    }
    .shop-details .goods-details .class-details > img{
        width:1rem;
        height:1rem;
        margin:.1rem;
    }
    .shop-details .goods-details .class-details .class-info{
        float:right;
        width:70%;
        height:100%;
    }
    .shop-details .goods-details .class-details .class-info > h2{
        font-size: .24rem;
    }
    .shop-details .goods-details .class-details .class-info .now-price{
        color:red;
        font-size: .22rem;
        margin-top:.06rem;
    }
    .shop-details .goods-details .class-details .class-info .original-price{
        color:#999;
        margin-top:.06rem;
        text-decoration: line-through;
    }
    .shop-details .goods-details .class-details .class-total{
        width:100%;
        height:1rem;
        border-bottom:1px solid #ccc;
    }
    .shop-details .goods-details .class-details .class-total > li{
        width:100%;
        height:.5rem;
    }
    .shop-details .goods-details .class-details .class-total .total-amount .t-num{
        float:right;
        width:50%;
        height:100%;
        text-align:right;
        padding-right:.2rem;
    }
    .shop-details .goods-details .class-details .class-total .total-amount .t-num > span{
        display: inline-block;
        width:.4rem;
        height:.4rem;
        background: #e1e1e1;
        text-align:center;
        line-height:.4rem;
        margin-top:.05rem;
    }
    .shop-details .goods-details .class-details .class-total .total-price .t-price{
        float:right;
        width:50%;
        height:100%;
        text-align:right;
        margin-right:.2rem;
        line-height:.5rem;
        color:red;
    }
    /* 底部订单 */
    .shop-details .botnav{
        position:fixed;
        bottom:0;
        left:0;
        display: flex;
        width:100%;
        height:.7rem;
        border-top:1px solid #ddd;
        z-index:999;
    }
    .shop-details .botnav .cart,
    .shop-details .botnav .settle{
        position: relative;
        width:50%;
        text-align:center;  
        background: #fff; 
    }
    .shop-details .botnav .cart > img{
        width:.4rem;
        height:.4rem;
    }
    .shop-details .botnav .cart > p{
        margin-top:-.06rem;
    }
    .shop-details .botnav .settle{
        background:#ff3c2c;
        color:#fff;
        font-weight: bold;
        font-size: .24rem;
        line-height:.7rem;
    }
    .shop-details .botnav .cart .cart-num{
        position: absolute;
        top:.04rem;
        right:40%;
        width:.26rem;
        height:.26rem;
        line-height:.25rem;
        background:#ff3c2c;
        color:#fff;
        border-radius: 50%;
        opacity:0;
    }
    </style>
</head>
<body>
    <div class="shop-details">
        <!-- 头部标题 -->
        <div class="header">
            <a href="./shop.html">
                <img src="../imgs/now/now_back.png" alt="">
            </a>
            <p>商品详情</p>
        </div>
        <!-- 详情部分 -->
        <div class="goods-details">
            <div class="class-details">
                <img src="../imgs/shop/shop_study.jpg" alt="">
                <div class="class-info">
                    <h2>新2019服装设计班</h2>
                    <p class="now-price">￥<span>18800.00</span></p>
                    <p class="original-price">原价：￥<span>18800.00</span></p>
                </div>
                <ul class="class-total">
                    <li class="total-amount">
                        <span style="line-height: .5rem;margin-left:.2rem;">数量</span>
                        <p class="t-num">
                            <span>-</span>
                            <span>0</span>
                            <span>+</span>
                        </p>
                    </li>
                    <li class="total-price">
                        <span style="line-height: .5rem;margin-left:.2rem;">总价</span>
                        <p class="t-price">￥<span>0.00</span></p>
                    </li>
                </ul>
                <div class="class-intro">
                    <span style="line-height: .5rem;margin-left:.2rem;">简介</span>
                    <span style="color:#999;margin-left:.6rem;">新2019服装设计班</span>
                </div>
                <div class="class-brief" style="margin-left:.15rem;color:#4678b7;">新2019服装设计班</div>
            </div>
        </div>
        <!-- 底部购物车 -->
        <div class="botnav">
            <div class="cart">
                <span class="cart-num">0</span>
                <img src="../imgs/shop/shop_cart.png" alt="">
                <p>订单</p>
            </div>
            <div class="settle">结算</div>
        </div>
    </div>
    <script>
        //let $h2 = $(".shop-details .goods-details .class-details .class-info  h2");
        //console.log($reduce)
    </script>
</body>
</html>